<template>
    <div class="profile-warp">
        <div class="form-avatar">
            <img class="avatar" :src="this.$store.state.userInfo.avatar">
            <profile-field label="头像">
                <div class="uploader">
                    <div class="input" v-for="(item,index) in max" :key="index">
                        <i v-if="uploader[index]" class="iconfont icon-close-bold" @click="del(index)"></i>
                        <img v-if="uploader[index]" :src="uploader[index].content || ''">
                        <input type="file" @change="preview1($event)" multiple="multiple" accept="image/x-png, image/jpg, image/jpeg, image/gif">
                        <i class="iconfont icon-picture"></i>
                    </div>
                </div>
            </profile-field>
        </div>
        <div class="form-nickname">
            <profile-field label="昵称">
                <input type="text" v-model="nickname" placeholder="请输入昵称">
            </profile-field>
        </div>
        <div class="form-submit">
            <button :style="{'background':Color}" @click="onSubmit">确认修改</button>
        </div>
        <profile-toast :loading="toasts.loading" :toast="toasts.toast" :text="toasts.text" :icon="toasts.icon" :iconfont="toasts.iconfont"></profile-toast>
    </div>
</template>

<script>
import ProfileToast from '../Common/Toast/Index'
import ProfileField from '../Common/Field/Index'
export default {
    name: 'ProfileForm',
    components: {
        ProfileToast,
        ProfileField
    },
    data() {
        return {
            max:1,
            uploader: [],
            nickname: this.$store.state.userInfo.nickname,

            toasts: {
                loading: false,
                toast: false,
                text: '',
                icon: false,
                iconfont: ''
            }
        }
    },
    methods: {
        onSubmit() {
            if(this.nickname.length >= 2) {
                this.ToastLoading()
                if(this.uploader.length) {
                    this.images = []
                    this.uploader.forEach(e => {
                        this.images.push(e.content)
                    })
                    this.$post('users/edit.php', {
                        userId: this.$store.state.userInfo.id,
                        avatar: this.images,
                        nickname: this.nickname
                    })
                    .then((res) => {
                        if(res.code == 400) {
                            this.Toast(`${res.desc}`,'icon-meh',800)
                            this.$store.commit('setUserInfo','')
                        }else if(res.code == 404) {
                            this.Toast(`${res.desc}`,'icon-meh',800)
                        }else {
                            this.Toast(`${res.desc}`,'icon-edit',800)
                            this.$store.commit("setUserInfo", res.userInfo);
                            this.$store.commit('setAnimate','turn-off')
                            setTimeout(() => {
                                this.$router.back(-1)
                            },500)
                        }
                    })
                }else{
                    this.$post('users/edit.php', {
                        userId: this.$store.state.userInfo.id,
                        nickname: this.nickname
                    })
                    .then((res) => {
                        if(res.code == 400) {
                            this.Toast(`${res.desc}`,'icon-meh',800)
                            this.$store.commit('setUserInfo','')
                        }else if(res.code == 404) {
                            this.Toast(`${res.desc}`,'icon-meh',800)
                        }else {
                            this.Toast(`${res.desc}`,'icon-edit',800)
                            this.$store.commit("setUserInfo", res.userInfo);
                            this.$store.commit('setAnimate','turn-off')
                            setTimeout(() => {
                                this.$router.back(-1)
                            },500)
                        }
                    })
                }
            }else{
                this.Toast('昵称不符合,请重新填写','icon-close-bold',800)
            }
        },
        //弹窗
        Toast(text,iconfont,time) {
            this.toasts.loading = false
            this.toasts.text = text
            this.toasts.icon = true
            this.toasts.iconfont = iconfont
            this.toasts.toast = true
            window.setTimeout(() => {
                this.toasts.toast = false
            },time);
        },
        ToastLoading() {
            this.toasts.loading = true
            this.toasts.icon = false
            this.toasts.text = '加载中...'
            this.toasts.toast = true
        },
        ToastClear() {
            this.toasts.toast = false
        },
        //上传图片
        preview1(e) {
            const file = e.srcElement.files[0]
            let that = this
            this.blobToDataUrl(file,function(base64Url) {
                that.uploader.push({
                    content: base64Url
                })
            })
        },
        del(index) {
            this.uploader.splice(index,1)
        },
        blobToDataUrl(blob,cb) {
            let reader = new FileReader()
            reader.onload = function(e) {
                var base64 = e.target.result
                cb(base64)
            }
            reader.readAsDataURL(blob)
        },
    },
    created() {
        if(!this.$store.state.userInfo) {
            this.Toast('信息错误','icon-close-bold',800)
            this.$store.commit('setAnimate','turn-off')
            setTimeout(() => {
                this.$router.back(-1)
            },500)
        }
    },
    computed: {
        Color() {
            return this.$store.state.colorItem[this.$store.state.colorIndex].color
        }
    }
}
</script>

<style scoped>
.profile-warp{
    padding-top:0.9rem;
}
.profile-warp .form-avatar{
    position: relative;
}
.profile-warp .form-avatar .avatar{
    display: block;
    width:1.6rem;
    height:1.6rem;
    position: absolute;
    right:1.8rem;
    top:0.2rem;
    z-index:1;
}
.profile-warp .form-nickname input{
    border:0;
    outline: none;
    width:100%;
}
.profile-warp .form-submit{
    margin:0.4rem 0.2rem 0.2rem 0.2rem;
}
.profile-warp .form-submit button{
    color:#fff;
    display: block;
    padding:0.2rem 0;
    border-radius:0.4rem;
    font-size:0.30rem;
    width:100%;
    border:0;
    position: relative;
    overflow: hidden;
}
.profile-warp .form-submit button::before{
    content: "";
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background:#000;
    opacity:0;
    transition:opacity 0.8s;
}
.profile-warp .form-submit button:active::before{
    opacity:0.2;
}
.uploader{
    display: flex;
}
.uploader .input{
    width:1.6rem;
    height:1.6rem;
    margin:0 0.16rem 0.16rem 0;
    background:#f7f8fa;
    position: relative;
}
.uploader .input img{
    width:100%;
    height:100%;
    display: block;
    object-fit: cover;
    position: absolute;
    top:0;
    left:0;
    z-index:3;
}
.uploader .input input{
    width:100%;
    height:100%;
    opacity:0;
    position: absolute;
    top:0;
    left:0;
    z-index:2;
}
.uploader .input .icon-close-bold{
    position: absolute;
    right:0;
    top:0;
    z-index:10;
}
.uploader .input .icon-picture{
    position: absolute;
    font-size:0.48rem;
    color:#dcdee0;
    left:50%;
    top:50%;
    transform: translate3d(-50%,-50%,0);
}
</style>